<template>
  <el-dialog width="600px" destroy-on-close append-to-body :visible.sync="show" :before-close="cancel">
    <template #title>
      <div>
        {{ $t('备货区信息') }} <span style="color: red; margin-left: 50px">No: {{ formData.slotNo }}</span>
      </div>
    </template>

    <el-row>
      <el-form :model="form" size="small" label-width="68px">
        <el-form-item>
          <div class="sku-info">
            <div class="sku-info-left">
              <div>skuNo:{{ details.skuNo }}</div>
              <div>库位号:{{ details.spNo }}</div>
              <div>产品名:{{ details.skuNameCn }}</div>
            </div>
            <div class="sku-info-right">
              <el-image
                style="width: 100px; height: 100px"
                :src="details.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                :preview-src-list="[details.imgUrl]"
                fit="fit" />
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('库存数量')">
          <div style="display: flex; justify-content: space-between">
            <div>
              {{ formData.skuNum }}
            </div>
            <el-tooltip effect="dark" content="库存为0清空库位" placement="top-start">
              <el-button type="text" icon="el-icon-info" circle></el-button>
            </el-tooltip>
          </div>
        </el-form-item>
        <el-form-item :label="$t('出库数量')" prop="qrCode">
          <el-input-number
            style="width: 300px"
            v-model="form.outNum"
            controls-position="right"
            :min="1"
            :max="formData.skuNum" />
          <el-button
            v-hasPermi="['distribution:storageAreaSlot:outStorageAreaSlot']"
            style="margin: 0 10px"
            plain
            @click="handleOutStorageAreaSlot"
            type="success">
            {{ $t('出库') }}
          </el-button>
        </el-form-item>
        <el-form-item :label="$t('入库数量')" prop="inNum">
          <el-input-number style="width: 300px" v-model="form.inNum" controls-position="right" :min="1" />
          <el-button @click="handleInStorageAreaSlot" style="margin: 0 10px" plain type="primary">
            {{ $t('入库') }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSlotSku, outStorageAreaSlot, inStorageAreaSlot } from '@/api/distribution/sku/storageArea'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      form: {
        outNum: '',
        inNum: '',
      },
      details: {},
      showSearch: true,
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.form.outNum = 1
        this.form.inNum = 1
        this.getList()
      }
    },
  },
  methods: {
    handleInStorageAreaSlot() {
      if (!this.form.inNum) {
        return this.$message({ type: 'error', message: '请输入' })
      }
      this.$confirm(this.$t('确认入库?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        const data = {
          id: this.formData.id,
          skuId: this.formData.skuId,
          skuNo: this.formData.skuNo,
          id: this.formData.id,
          inNum: this.form.inNum,
        }
        inStorageAreaSlot(data).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.$message({ type: 'success', message: msg })
            this.$emit('getList')
            this.cancel()
          }
        })
      })
    },
    handleOutStorageAreaSlot() {
      if (!this.form.outNum) {
        return this.$message({ type: 'error', message: '请输入' })
      }
      this.$confirm(this.$t('确认出库?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        const data = {
          id: this.formData.id,
          outNum: this.form.outNum,
        }
        outStorageAreaSlot(data).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.$message({ type: 'success', message: msg })
            this.$emit('getList')
            this.cancel()
          }
        })
      })
    },
    getList() {
      getSlotSku({ skuNo: this.formData.skuNo }).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.details = { ...data }
        }
      })
    },
    handleSubmit() {},

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
.sku-info {
  display: flex;
  width: 100%;
  &-left {
    flex: 1;
  }
  &-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
}
</style>
